<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>a 在链接中包含图标以及模仿按钮功能</title>
</head>
<body>
  <style>
    body {
      margin: 0 auto;
      font-size: 1.2rem;
      font-family: sans-serif;
      line-height: 1.4; 
    }
    a {
      outline: none;
      text-decoration: none;
    }
    /* 链接伪类 */
    a:link {
      color: lightskyblue;
    }
    a:visited {
      color: rgb(245, 49, 0);
    }
    a:focus {
      border-bottom: 1px dashed;
      background: lightcyan;
    }
    a:hover {
      border-bottom: 1px  double;
      background: aliceblue;
    }
    a:active {
      background: lightsalmon;
      color: white;
    }

    /* 链接图标 */
    .a-share {
      background: url("share.png") no-repeat 100% 0;
      background-size: 16px 16px;  /* 指定要显示的背景图像的大小，为了满足响应式网站设计的需要 */
      padding-right: 19px; /* 为背景图片留出空间，这样就不会让它和文本重叠了 */
    }
    .a-feed {
      background: url("feed.svg") no-repeat 100% 0;
      padding-right: 15px;
      text-decoration: underline;
    }

    /* 链接按钮 */
    .a-button,
    .a-button:link {
      display: inline-block;
      padding: 5px;
      border: 2px solid  lightblue;
      border-radius: 5px;
      color: rgb(9, 216, 61);
      text-align: center;
      width: 30%;
      margin: 0 15px;
    }
    .a-button:hover {
      color: white;
      background: rgb(95, 151, 11);
      border-color: rgb(95, 151, 11);
    }
    /* 使用伪元素为链接添加文字或图片 */
    .a-button::before {
      content: url("warning.svg");
      display: inline-block;
      vertical-align: middle;
      width: 20px;
      height: 20px;
      padding-right: 3px;
    }

    /* 使用伪元素为链接元素添加备注(值得学习) */
    span[data-descr] {
      position: relative;
      text-decoration: underline;
      color: lightblue;
      cursor: help;
    }
    span[data-descr]:hover::after {
      content: attr(data-descr);  /* 获取元素 data-descr 属性值，并展示 */
      position: absolute;         /* 使用绝对定位 */
      left: 0; 
      top: 24px;
      min-width: 200px;
      border: 1px #aaaaaa solid;
      border-radius: 10px;
      background-color: #ffffcc;
      padding: 12px;
      color: #000000;
      font-size: 14px;
      z-index: 1;  /* 内容层级，当前页面文字之上 */
    }
    </style>
    <h3>1.链接背景样式及链接按钮样式演示</h3>
    <p>
      欢迎各位学习前端的朋友，访问作者的 WeiyiGeek 的个人站点 （<a href="https://www.weiyigeek.top" target="_blank" class="a-share">Person WebSite</a>） 以及作者个人博客（<a href="https://blog.weiyigeek.top" target="_blank" class="a-share" >Person Blog</a>），同时环境大家订阅作者 <a href="https://blog.weiyigeek.top/atom.xml" target="_blank" class="a-feed"> Feed-RSS </a> &nbsp;最新文章及时推送。
    </p>
    <h3>2.链接按钮样式演示</h3>
    <p>欢迎大家关注<a href="https://www.weiyigeek.top/wechat.html" alt="全栈工程师修炼指南" class="a-button">[全栈工程师修炼指南]</a>公众号</p>

    <h3>3.链接提示用法演示</h3>
    <p>
    这是下面是代码的实现<br />
    我们有一些有一些<span data-descr="匹配元素的第一个子元素">::before</span>伪元素使用演示。<br />
    你可以把鼠标放上去看看<span data-descr="配元素的最后一个子元素"><a href="#">::after</a></span>伪元素的结束。
    </p>
</body>
</html>